<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员系统控制台</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.21.1/dist/axios.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: #f5f7fa;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            color: #333;
        }
        
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: linear-gradient(135deg, #2c3e50, #1a2530);
            color: white;
            padding: 15px 30px;
            position: relative;
            z-index: 100;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }
        
        .logo-container {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .logo-container img {
            height: 45px;
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
        }
        
        .logo-container h1 {
            font-size: 1.8rem;
            font-weight: 600;
            color: white;
        }
        
        .user-info-container {
            display: flex;
            align-items: center;
            gap: 20px;
        }
        
        .user-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: #3498db;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            font-weight: bold;
            color: white;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .user-avatar:hover {
            transform: scale(1.05);
            background: #2980b9;
        }
        
        .logout-btn {
            background: rgba(255, 255, 255, 0.15);
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.3);
            padding: 8px 18px;
            border-radius: 20px;
            cursor: pointer;
            font-weight: 500;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .logout-btn:hover {
            background: rgba(255, 255, 255, 0.25);
            transform: translateY(-2px);
        }
        
        .container {
            display: flex;
            flex: 1;
            padding: 20px;
            max-width: 1600px;
            margin: 0 auto;
            width: 100%;
            gap: 20px;
        }
        
        .sidebar {
            width: 260px;
            background: white;
            border-radius: 15px;
            padding: 20px 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
            height: fit-content;
        }
        
        .sidebar-header {
            padding: 15px 10px;
            border-bottom: 1px solid #eaeaea;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .sidebar-header i {
            font-size: 1.4rem;
            color: #2c3e50;
        }
        
        .sidebar-header h2 {
            color: #2c3e50;
            font-size: 1.4rem;
            font-weight: 600;
        }
        
        .sidebar ul {
            list-style: none;
            padding: 0;
        }
        
        .sidebar ul li {
            margin: 10px 0;
        }
        
        .sidebar ul li a {
            text-decoration: none;
            color: #555;
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 14px 20px;
            border-radius: 10px;
            transition: all 0.3s ease;
            font-size: 1.1rem;
            font-weight: 500;
        }
        
        .sidebar ul li a:hover {
            background: #f0f7ff;
            color: #2c3e50;
        }
        
        .sidebar ul li a.active {
            background: #e1f0ff;
            color: #2c3e50;
            font-weight: 600;
        }
        
        .sidebar ul li a i {
            font-size: 1.2rem;
            width: 25px;
            text-align: center;
        }
        
        .main-content {
            flex: 1;
            background: white;
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
            display: flex;
            flex-direction: column;
            gap: 30px;
        }
        
        .welcome-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
            padding-bottom: 20px;
            border-bottom: 1px solid #eaeaea;
        }
        
        .welcome-header h2 {
            color: #2c3e50;
            font-size: 1.8rem;
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .welcome-header h2 i {
            color: #2c3e50;
            background: #e1f0ff;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
        }
        
        .dashboard {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }
        
        .card {
            background: white;
            border-radius: 12px;
            padding: 25px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
            border: 1px solid #eaeaea;
            display: flex;
            flex-direction: column;
        }
        
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
            border-color: #cce5ff;
        }
        
        .card h3 {
            color: #2c3e50;
            margin-top: 0;
            margin-bottom: 20px;
            font-size: 1.4rem;
            display: flex;
            align-items: center;
            gap: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid #f0f7ff;
        }
        
        .card h3 i {
            color: #3498db;
        }
        
        .card p {
            color: #555;
            line-height: 1.6;
            margin: 10px 0;
        }
        
        .card .card-content {
            flex: 1;
        }
        
        .card .card-footer {
            margin-top: auto;
            padding-top: 15px;
        }
        
        .card button {
            background: #e1f0ff;
            color: #3498db;
            border: none;
            padding: 10px 20px;
            border-radius: 25px;
            cursor: pointer;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s ease;
            width: 100%;
            justify-content: center;
        }
        
        .card button:hover {
            background: #3498db;
            color: white;
        }
        
        .section {
            background: white;
            border-radius: 12px;
            padding: 25px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
            border: 1px solid #eaeaea;
        }
        
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .section-header h3 {
            color: #2c3e50;
            font-size: 1.5rem;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .data-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
            background: white;
            border: 1px solid #eaeaea;
        }
        
        .data-table th {
            background: linear-gradient(135deg, #2c3e50, #1a2530);
            color: white;
            padding: 16px 15px;
            text-align: left;
            font-weight: 500;
        }
        
        .data-table th:first-child {
            border-top-left-radius: 10px;
        }
        
        .data-table th:last-child {
            border-top-right-radius: 10px;
        }
        
        .data-table td {
            padding: 14px 15px;
            border-bottom: 1px solid #f0f7ff;
            color: #555;
        }
        
        .data-table tr:last-child td {
            border-bottom: none;
        }
        
        .data-table tr:nth-child(even) {
            background-color: #f9fcff;
        }
        
        .data-table tr:hover {
            background-color: #f0f7ff;
        }
        
        .data-table .status-badge {
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 500;
        }
        
        .status-active {
            background-color: #e6f7e9;
            color: #27ae60;
        }
        
        .status-pending {
            background-color: #fff8e6;
            color: #f39c12;
        }
        
        .status-inactive {
            background-color: #fce7e6;
            color: #e74c3c;
        }
        
        .data-table button {
            background: #e1f0ff;
            color: #3498db;
            border: none;
            padding: 8px 15px;
            border-radius: 20px;
            cursor: pointer;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: all 0.3s ease;
        }
        
        .data-table button:hover {
            background: #3498db;
            color: white;
        }
        
        .action-btn {
            background: #3498db;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 25px;
            cursor: pointer;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s ease;
        }
        
        .action-btn:hover {
            background: #2980b9;
            transform: translateY(-2px);
        }
        
        .stat-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 15px;
            margin-top: 15px;
        }
        
        .stat-card {
            background: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
            border: 1px solid #eaeaea;
            text-align: center;
            transition: all 0.3s ease;
        }
        
        .stat-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .stat-card i {
            font-size: 2.5rem;
            color: #3498db;
            margin-bottom: 15px;
        }
        
        .stat-card.warning i {
            color: #f39c12;
        }
        
        .stat-card.danger i {
            color: #e74c3c;
        }
        
        .stat-card.success i {
            color: #27ae60;
        }
        
        .stat-card h4 {
            font-size: 1.2rem;
            color: #555;
            margin-bottom: 10px;
        }
        
        .stat-card .value {
            font-size: 2rem;
            font-weight: 700;
            color: #2c3e50;
        }
        
        .stat-card .subtext {
            font-size: 0.9rem;
            color: #7f8c8d;
            margin-top: 5px;
        }
        
        .tab-container {
            display: flex;
            margin-bottom: 20px;
            border-bottom: 1px solid #eaeaea;
        }
        
        .tab {
            padding: 12px 25px;
            cursor: pointer;
            font-weight: 500;
            color: #555;
            position: relative;
            border-bottom: 3px solid transparent;
            transition: all 0.3s ease;
        }
        
        .tab.active {
            color: #3498db;
            font-weight: 600;
            border-bottom: 3px solid #3498db;
        }
        
        /* Vue加载状态样式 */
        .loading-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 200px;
        }
        
        .loading-spinner {
            width: 50px;
            height: 50px;
            border: 5px solid rgba(52, 152, 219, 0.3);
            border-radius: 50%;
            border-top-color: #3498db;
            animation: spin 1s ease-in-out infinite;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        /* API调试面板 */
        .api-debug {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: rgba(44, 62, 80, 0.9);
            color: white;
            border-radius: 10px;
            padding: 15px;
            width: 300px;
            z-index: 1000;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }
        
        .api-debug h4 {
            margin-bottom: 10px;
            padding-bottom: 8px;
            border-bottom: 1px solid rgba(255,255,255,0.2);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .api-debug button {
            background: #3498db;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 5px;
            cursor: pointer;
            margin-top: 10px;
            width: 100%;
        }
        
        /* 响应式设计 */
        @media (max-width: 1200px) {
            .container {
                flex-direction: column;
            }
            
            .sidebar {
                width: 100%;
                margin-bottom: 20px;
            }
        }
        
        @media (max-width: 768px) {
            .navbar {
                padding: 12px 15px;
            }
            
            .logo-container h1 {
                font-size: 1.5rem;
            }
            
            .dashboard {
                grid-template-columns: 1fr;
            }
            
            .welcome-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 15px;
            }
            
            .section-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 15px;
            }
            
            .api-debug {
                width: 250px;
                font-size: 0.9rem;
            }
            
            .tab {
                padding: 10px 15px;
                font-size: 0.9rem;
            }
        }
        
        /* 动画效果 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .card, .section {
            animation: fadeIn 0.5s ease-out;
        }
        
        .card:nth-child(2) {
            animation-delay: 0.1s;
        }
        
        .card:nth-child(3) {
            animation-delay: 0.2s;
        }
        
        .section:nth-child(2) {
            animation-delay: 0.3s;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 顶部导航栏 -->
        <div class="navbar">
            <div class="logo-container">
                <img src="https://via.placeholder.com/45x45/2c3e50/ffffff?text=AD" alt="LOGO">
                <h1>实验管理系统 - 管理员控制台</h1>
            </div>
            
            <div class="user-info-container">
                <div class="user-avatar">{{ userInitials }}</div>
                <button class="logout-btn" @click="logout">
                    <i class="fas fa-sign-out-alt"></i> 退出
                </button>
            </div>
        </div>

        <!-- 页面容器 -->
        <div class="container">
            <!-- 侧边栏 -->
            <div class="sidebar">
                <div class="sidebar-header">
                    <i class="fas fa-cogs"></i>
                    <h2>管理员控制台</h2>
                </div>
                <ul>
                    <li v-for="(item, index) in menuItems" :key="index">
                        <a href="#" :class="{active: activeMenu === item.id}" @click.prevent="setActiveMenu(item.id)">
                            <i :class="item.icon"></i>{{ item.name }}
                        </a>
                    </li>
                </ul>
            </div>

            <!-- 主内容区 -->
            <div class="main-content">
                <div class="welcome-header">
                    <h2>
                        <i class="fas fa-user-shield"></i>
                        欢迎回来，{{ user.name }} 管理员
                    </h2>
                    <div>
                        <button class="action-btn" @click="refreshSystemStatus">
                            <i class="fas fa-sync-alt"></i> 刷新系统状态
                        </button>
                    </div>
                </div>

                <!-- 系统状态卡片 -->
                <div class="section">
                    <div class="section-header">
                        <h3><i class="fas fa-heartbeat"></i> 系统概览</h3>
                    </div>
                    
                    <div class="stat-grid">
                        <div class="stat-card">
                            <i class="fas fa-users"></i>
                            <h4>总用户数</h4>
                            <div class="value">{{ systemStats.totalUsers }}</div>
                            <div class="subtext">教师: {{ systemStats.teachers }} | 学生: {{ systemStats.students }}</div>
                        </div>
                        <div class="stat-card warning">
                            <i class="fas fa-exclamation-triangle"></i>
                            <h4>待处理问题</h4>
                            <div class="value">{{ systemStats.pendingIssues }}</div>
                            <div class="subtext">需要关注的问题</div>
                        </div>
                        <div class="stat-card success">
                            <i class="fas fa-file-alt"></i>
                            <h4>实验提交状态</h4>
                            <div class="value">{{ systemStats.submittedExps }}/{{ systemStats.totalExps }}</div>
                            <div class="subtext">提交率: {{ Math.round((systemStats.submittedExps/systemStats.totalExps)*100) }}%</div>
                        </div>
                        <div class="stat-card">
                            <i class="fas fa-server"></i>
                            <h4>系统运行状态</h4>
                            <div class="value">正常</div>
                            <div class="subtext">运行时间: 28天</div>
                        </div>
                    </div>
                </div>

                <!-- 用户管理 -->
                <div class="section">
                    <div class="section-header">
                        <h3><i class="fas fa-users-cog"></i> 用户管理</h3>
                        <button class="action-btn" @click="addUser">
                            <i class="fas fa-user-plus"></i> 添加用户
                        </button>
                    </div>
                    
                    <div class="tab-container">
                        <div class="tab" :class="{active: activeTab === 'teachers'}" @click="activeTab = 'teachers'">教师管理 ({{ teachers.length }})</div>
                        <div class="tab" :class="{active: activeTab === 'students'}" @click="activeTab = 'students'">学生管理 ({{ students.length }})</div>
                    </div>
                    
                    <div v-if="activeTab === 'teachers'">
                        <table class="data-table">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>姓名</th>
                                    <th>邮箱</th>
                                    <th>职称</th>
                                    <th>状态</th>
                                    <th>最后登录</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(teacher, index) in teachers" :key="index">
                                    <td>{{ teacher.id }}</td>
                                    <td>{{ teacher.name }}</td>
                                    <td>{{ teacher.email }}</td>
                                    <td>{{ teacher.title }}</td>
                                    <td>
                                        <span class="status-badge" :class="{
                                            'status-active': teacher.status === 'active',
                                            'status-inactive': teacher.status === 'inactive'
                                        }">
                                            {{ teacher.status === 'active' ? '活跃' : '禁用' }}
                                        </span>
                                    </td>
                                    <td>{{ teacher.lastLogin }}</td>
                                    <td>
                                        <button @click="editUser(teacher)">
                                            <i class="fas fa-edit"></i> 编辑
                                        </button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    
                    <div v-if="activeTab === 'students'">
                        <table class="data-table">
                            <thead>
                                <tr>
                                    <th>学号</th>
                                    <th>姓名</th>
                                    <th>班级</th>
                                    <th>状态</th>
                                    <th>实验完成数</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(student, index) in students" :key="index">
                                    <td>{{ student.id }}</td>
                                    <td>{{ student.name }}</td>
                                    <td>{{ student.class }}</td>
                                    <td>
                                        <span class="status-badge" :class="{
                                            'status-active': student.status === 'active',
                                            'status-inactive': student.status === 'inactive'
                                        }">
                                            {{ student.status === 'active' ? '活跃' : '禁用' }}
                                        </span>
                                    </td>
                                    <td>{{ student.completedExps }} / {{ totalExps }}</td>
                                    <td>
                                        <button @click="viewStudentDetails(student)">
                                            <i class="fas fa-eye"></i> 查看
                                        </button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                
                <!-- 问题处理 -->
                <div class="section">
                    <div class="section-header">
                        <h3><i class="fas fa-exclamation-circle"></i> 问题处理</h3>
                        <div>
                            <button class="action-btn" @click="resolveAllIssues">
                                <i class="fas fa-check-double"></i> 全部解决
                            </button>
                        </div>
                    </div>
                    
                    <table class="data-table">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>问题标题</th>
                                <th>报告人</th>
                                <th>状态</th>
                                <th>报告时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(issue, index) in issues" :key="index">
                                <td>{{ issue.id }}</td>
                                <td>{{ issue.title }}</td>
                                <td>{{ issue.reporter }}</td>
                                <td>
                                    <span class="status-badge" :class="{
                                        'status-pending': issue.status === '待处理',
                                        'status-active': issue.status === '处理中',
                                        'status-inactive': issue.status === '已解决'
                                    }">
                                        {{ issue.status }}
                                    </span>
                                </td>
                                <td>{{ issue.date }}</td>
                                <td>
                                    <button @click="resolveIssue(issue)">
                                        <i class="fas fa-check"></i> 解决
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                
                <!-- 系统监控 -->
                <div class="section">
                    <div class="section-header">
                        <h3><i class="fas fa-chart-line"></i> 系统监控</h3>
                        <button class="action-btn" @click="generateReport">
                            <i class="fas fa-file-pdf"></i> 生成报告
                        </button>
                    </div>
                    
                    <div class="dashboard">
                        <div class="card">
                            <h3><i class="fas fa-flask"></i> 实验状态</h3>
                            <div class="card-content">
                                <p>总实验数: {{ experiments.length }}</p>
                                <p>已完成: {{ completedExps }}</p>
                                <p>进行中: {{ inProgressExps }}</p>
                                <p>未开始: {{ notStartedExps }}</p>
                            </div>
                            <div class="card-footer">
                                <button @click="viewAllExperiments">
                                    <i class="fas fa-list"></i> 查看所有实验
                                </button>
                            </div>
                        </div>
                        
                        <div class="card">
                            <h3><i class="fas fa-user-graduate"></i> 用户活动</h3>
                            <div class="card-content">
                                <p>今日登录: {{ userActivity.todayLogin }}</p>
                                <p>7日活跃: {{ userActivity.weeklyActive }}</p>
                                <p>30日活跃: {{ userActivity.monthlyActive }}</p>
                                <p>平均在线时长: {{ userActivity.avgOnline }} 分钟</p>
                            </div>
                            <div class="card-footer">
                                <button @click="viewUserActivity">
                                    <i class="fas fa-chart-bar"></i> 查看详细报告
                                </button>
                            </div>
                        </div>
                        
                        <div class="card">
                            <h3><i class="fas fa-server"></i> 系统资源</h3>
                            <div class="card-content">
                                <p>CPU 使用率: {{ systemResources.cpu }}%</p>
                                <p>内存使用率: {{ systemResources.memory }}%</p>
                                <p>存储空间: {{ systemResources.storage }}%</p>
                                <p>网络流量: {{ systemResources.network }} MB/s</p>
                            </div>
                            <div class="card-footer">
                                <button @click="monitorSystem">
                                    <i class="fas fa-tachometer-alt"></i> 实时监控
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- API调试面板 -->
        <div class="api-debug">
            <h4><i class="fas fa-code"></i> API调试面板</h4>
            <p>当前用户：{{ user.name }} (管理员)</p>
            <p>最后刷新: {{ lastRefresh }}</p>
            <p>数据加载状态：{{ loading ? '加载中...' : '加载完成' }}</p>
            <button @click="simulateApiCall">模拟API请求</button>
        </div>
    </div>
    
    <script>
        new Vue({
            el: '#app',
            data: {
                // 用户信息
                user: {
                    name: '张管理员',
                    initials: 'Z'
                },
                
                // 菜单项
                menuItems: [
                    { id: 'dashboard', name: '控制面板', icon: 'fas fa-tachometer-alt' },
                    { id: 'users', name: '用户管理', icon: 'fas fa-users-cog' },
                    { id: 'experiments', name: '实验管理', icon: 'fas fa-flask' },
                    { id: 'issues', name: '问题处理', icon: 'fas fa-exclamation-circle' },
                    { id: 'monitor', name: '系统监控', icon: 'fas fa-chart-line' },
                    { id: 'settings', name: '系统设置', icon: 'fas fa-cog' }
                ],
                activeMenu: 'dashboard',
                activeTab: 'teachers',
                
                // 系统统计
                systemStats: {
                    totalUsers: 1420,
                    teachers: 42,
                    students: 1378,
                    pendingIssues: 8,
                    submittedExps: 1245,
                    totalExps: 1500
                },
                
                // 教师数据
                teachers: [
                    { id: 't001', name: '张教授', email: 'zhang@uni.edu', title: '教授', status: 'active', lastLogin: '2023-10-15' },
                    { id: 't002', name: '李教授', email: 'li@uni.edu', title: '副教授', status: 'active', lastLogin: '2023-10-18' },
                    { id: 't003', name: '王老师', email: 'wang@uni.edu', title: '讲师', status: 'active', lastLogin: '2023-10-20' },
                    { id: 't004', name: '赵教授', email: 'zhao@uni.edu', title: '教授', status: 'inactive', lastLogin: '2023-10-12' }
                ],
                
                // 学生数据
                students: [
                    { id: 's2023001', name: '张三', class: 'CS2023', status: 'active', completedExps: 4 },
                    { id: 's2023002', name: '李四', class: 'AI2023', status: 'active', completedExps: 3 },
                    { id: 's2023003', name: '王五', class: 'CS2023', status: 'active', completedExps: 5 },
                    { id: 's2023004', name: '赵六', class: 'AI2023', status: 'inactive', completedExps: 2 },
                    { id: 's2023005', name: '钱七', class: 'SE2023', status: 'active', completedExps: 6 },
                    { id: 's2023006', name: '孙八', class: 'CS2023', status: 'active', completedExps: 3 }
                ],
                
                // 问题数据
                issues: [
                    { id: 'iss001', title: '实验二材料无法下载', reporter: 's2023001', status: '待处理', date: '2023-10-18' },
                    { id: 'iss002', title: '成绩导出格式错误', reporter: 't001', status: '处理中', date: '2023-10-17' },
                    { id: 'iss003', title: '系统登录缓慢', reporter: 's2023005', status: '待处理', date: '2023-10-19' },
                    { id: 'iss004', title: '用户权限配置问题', reporter: 't003', status: '处理中', date: '2023-10-16' }
                ],
                
                // 实验数据
                experiments: [
                    { id: 'exp1', name: '数据表示实验', status: 'completed' },
                    { id: 'exp2', name: 'BombLab实验', status: 'in-progress' },
                    { id: 'exp3', name: 'AttackLab实验', status: 'not-started' },
                    { id: 'exp4', name: 'LinkLab实验', status: 'in-progress' }
                ],
                
                // 用户活动
                userActivity: {
                    todayLogin: 142,
                    weeklyActive: 856,
                    monthlyActive: 1320,
                    avgOnline: 42
                },
                
                // 系统资源
                systemResources: {
                    cpu: 24,
                    memory: 58,
                    storage: 42,
                    network: 12
                },
                
                // 其他数据
                totalExps: 8,
                lastRefresh: '2023-10-20 14:30',
                loading: false,
                apiCalls: 0
            },
            
            computed: {
                // 用户首字母
                userInitials() {
                    return this.user.name ? this.user.name.charAt(0).toUpperCase() : 'A';
                },
                
                // 实验状态统计
                completedExps() {
                    return this.experiments.filter(e => e.status === 'completed').length;
                },
                inProgressExps() {
                    return this.experiments.filter(e => e.status === 'in-progress').length;
                },
                notStartedExps() {
                    return this.experiments.filter(e => e.status === 'not-started').length;
                }
            },
            
            methods: {
                // 设置活动菜单
                setActiveMenu(menuId) {
                    this.activeMenu = menuId;
                },
                
                // 刷新系统状态
                refreshSystemStatus() {
                    this.loading = true;
                    // 模拟API请求
                    setTimeout(() => {
                        this.lastRefresh = new Date().toLocaleString();
                        this.loading = false;
                        alert('系统状态已刷新');
                    }, 1000);
                },
                
                // 添加用户
                addUser() {
                    alert('添加用户功能');
                    // 在实际应用中，这里会打开添加用户的模态框
                },
                
                // 编辑用户
                editUser(user) {
                    alert(`编辑用户: ${user.name}`);
                    // 在实际应用中，这里会打开编辑用户的模态框
                },
                
                // 查看学生详情
                viewStudentDetails(student) {
                    alert(`查看学生详情: ${student.name}`);
                    // 在实际应用中，这里会打开学生详情页面
                },
                
                // 解决问题
                resolveIssue(issue) {
                    if (confirm(`确定要将问题 "${issue.title}" 标记为已解决吗？`)) {
                        issue.status = '已解决';
                    }
                },
                
                // 解决所有问题
                resolveAllIssues() {
                    if (confirm('确定要将所有问题标记为已解决吗？')) {
                        this.issues.forEach(issue => {
                            issue.status = '已解决';
                        });
                    }
                },
                
                // 查看所有实验
                viewAllExperiments() {
                    alert('查看所有实验');
                },
                
                // 查看用户活动
                viewUserActivity() {
                    alert('查看用户活动报告');
                },
                
                // 监控系统
                monitorSystem() {
                    alert('打开系统实时监控');
                },
                
                // 生成报告
                generateReport() {
                    alert('生成系统报告');
                },
                
                // 退出登录
                logout() {
                    if (confirm('确定要退出系统吗？')) {
                        // 在实际应用中，这里会清除session并重定向到登录页
                        alert('您已退出系统');
                    }
                },
                
                // 模拟API调用
                simulateApiCall() {
                    this.apiCalls++;
                    this.loading = true;
                    
                    setTimeout(() => {
                        this.loading = false;
                        alert(`API请求成功 (${this.apiCalls})`);
                    }, 1000);
                }
            }
        });
    </script>
</body>
</html>